<template>
  <div class="menu">
    <div class="slideShow">
      <!-- 导入轮播图组件 -->
       <slide-show :images="image"></slide-show>
      <div class="box">
        <div class="type">
          <div
            :class="['item', { active: currentIndex == index }]"
            v-for="(item, index) in typeList"
            :key="index"
            @click="toggleActive(item, index)"
          >
            <div class="icon">
              <img
                :src="`${
                  currentIndex == index
                    ? menuList[index].icon_active
                    : menuList[index].icon
                }`"
              />
            </div>
            <div class="text">{{ item.typeDesc }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="item" v-for="(item, index) in detailArr" :key="index">
        <detail-list :listArr="item"></detail-list>
      </div>
    </div>
    <div class="search">
      <van-button type="primary" size="normal" color="#2BAB7B" @click="search">搜索菜单</van-button>
    </div>
  </div>
</template>
<script>
import detailList from "../components/DtailList.vue";
import slideShow from "../components/SlideShow.vue";
export default {
  data() {
    return {
      image: [
        {
          title: "第一张",
          swipeImag: require("../assets/images/1.png"),
        },
        {
          title: "第二张",
          swipeImag: require("../assets/images/2.png"),
        },
        {
          title: "第三张",
          swipeImag: require("../assets/images/3.png"),
        },
      ],
      // 图片的数组
      menuList: [
        {
          icon: require("../assets/images/hot.png"),
          icon_active: require("../assets/images/hot_active.png"),
        },
        {
          icon: require("../assets/images/natie.png"),
          icon_active: require("../assets/images/natie_active.png"),
        },
        {
          icon: require("../assets/images/coffee.png"),
          icon_active: require("../assets/images/coffee_active.png"),
        },
        {
          icon: require("../assets/images/ruina.png"),
          icon_active: require("../assets/images/ruina_active.png"),
        },
        {
          icon: require("../assets/images/fruits.png"),
          icon_active: require("../assets/images/fruits_active.png"),
        },
      ],
      // 类型的数组
      typeList: [],
      // 点击高亮的实现效果
      currentIndex: 0,
      // 渲染的数组
      detailArr: [],
      // 用来防止多次点击做无用功的
      moreClick:''
    };
  },
  components: {
    detailList,
    slideShow
  },
  methods: {
    // 获取商品类型
    getType() {
      this.axios({
        method: "get",
        url: "/type",
      })
        .then((res) => {
          if (res.data.code === 400) {
            res.data.result.unshift({ type: "isHot", typeDesc: "热卖推荐" });
            this.typeList = res.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取商品详细内容
    getDetali(type) {
      if(type===this.moreClick){
        return
      }
      this.moreClick=type
      let key = "";
      let value = "";

      if (type === "isHot") {
        key = "isHot";
        value = 1;
      } else {
        key = "type";
        value = type;
      }
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key,
          value,
        },
      })
        .then((res) => {
          if (res.data.code === 500) {
            this.detailArr = res.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search(){
        this.$router.push({name:"Search"})
    },
    toggleActive(data, index) {
      this.currentIndex = index;
      this.getDetali(data.type);
    },
  },
  mounted() {
    this.getType();
    this.getDetali("isHot");
  },
};
</script>
<style lang="less" scoped>
// 引入公共样式
@import url("../assets/base.less");
.menu {
  .slideShow {
    position: sticky;
    top: 0;
    .box {
      overflow: hidden;
      width: 100%;
      height: 80px;
      .type {
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        .item {
          height: 86px;
          width: 22%;
          display: inline-block;
          margin-left: 4px;
          vertical-align: top;
          background-color: #fff;
          &:nth-of-type(1) {
            margin-left: 0px;
          }
          .icon {
            height: 60px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 45%;
            }
          }
          .text {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            margin-top: -3px;
          }
        }
        .active {
          background-color: #f0f0f0;
        }
      }
    }
  }
  .detail {
    position: absolute;
    top: 290px;
    bottom: 50px;
    overflow-y: auto;
  }
  .search{
    position: absolute;
    top: 85%;
    left: 0px;
    border-radius: 20px;
    height: 40px;
    overflow: hidden;
  }
}
</style>